<template>
    <div id="private-placement">
        <div class="table-toolbar">
            <el-form label-width="90px" :model="searchParams">
                <el-row>
                    <el-col :span="5">
                        <el-form-item label="证券信息:">
                            <el-select v-model="searchParams.cpdmXhs" filterable multiple collapse-tags clearable size="mini">
                                <el-option
                                    v-for="i in computedFundStorage"
                                    :key="i.dictKey"
                                    :label="i.dictKey + ' ' + i.dictKeyName"
                                    :value="i.dictKey"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="估值日期:">
                            <el-date-picker
                                v-model="searchParams.valuationDate"
                                type="date"
                                size="mini"
                                style="width: 100%"
                                value-format="yyyyMMdd"
                                format="yyyy-MM-dd"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="估值类型:">
                            <el-select v-model="searchParams.valuationDetail" clearable size="mini">
                                <el-option v-for="(value, key) in ValuationDetail" :key="value" :label="value" :value="key"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9" style="padding-left: 10px">
                        <el-button size="mini" type="primary" icon="el-icon-search" @click="handleBtnClick('search')">查询</el-button>
                        <el-button size="mini" @click="handleBtnClick('reset')">重置</el-button>
                        <el-button size="mini" @click="handleBtnClick('export')">导出</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!--  -->
        <RiskTable
            ref="risk-table"
            :tableData="tableData"
            :tableConfig="tableConfig"
            :column="columns"
            :paging="paging"
            :searchParams="searchParams"
            v-loading="tableLoading"
            :key="tableKey"
            style="height: calc(100% - 60px); padding: 0 10px"
            @page-change="getTableData"
            @resize-change="resizeChange"
        >
        </RiskTable>
    </div>
</template>
<script lang="ts">
import { ColumnVO, DictVO, PageVO, TableConfigVO } from '@/common/vo';
import { SGU_CACHE } from '@/utils/diction-const-util';
import { changeOptions, dateFormat } from '@/utils/tools';
import { Component, Vue, Prop } from 'vue-property-decorator';
import API from '../api/report-manage';
import { PrivatePlacementDTO, PrivatePlacementVO, PrivatePlacementRepVO } from '../vo/report-manage';
import RiskTable from '@/common/components/risk-table-plus.vue';
import Dict from '../dict/index';
import { getTableLayout2, updateTableLayout } from '@/common/api/commonApi';

@Component({ name: 'PrivatePlacement', components: { RiskTable } })
export default class PrivatePlacement extends Vue {
    @Prop() activeTab: string;

    Dict = new Dict();
    ValuationDetail = Dict.ValuationDetail;

    tableLoading: boolean = false;
    tableData: PrivatePlacementVO[] = [];
    tableConfig: TableConfigVO = {
        rowKey: 'cpdmXh', // 主键key
        allRowKeys: [], // 所有页数据的key集合
    };
    columns: ColumnVO[] = [
        {
            type: 'checkbox', // 复选框
            // selectedAll: true, // 选中所有页
            fixed: 'left',
            align: 'center',
            width: 60,
        },
        {
            title: '证券代码',
            field: 'cpdmXh',
            fixed: 'left',
            minWidth: 80,
        },
        {
            title: '证券简称',
            field: 'fundNameSt',
            minWidth: 120,
        },
        {
            title: '证券全称',
            field: 'fundName',
            minWidth: 200,
        },
        {
            title: '管理人',
            field: 'managerName',
            minWidth: 200,
        },
        {
            title: '托管行',
            field: 'companyName',
            minWidth: 200,
        },
        {
            title: '估值明细程度',
            field: 'valuationDetail',
            minWidth: 110,
            render: value => this.ValuationDetail[value],
        },
        {
            title: '待提供估值日期',
            field: 'valuationDate2',
            align: 'center',
            minWidth: 100,
            render: value => dateFormat(value) || '--',
        },
        {
            title: '实际估值日期',
            field: 'valuationDate',
            align: 'center',
            minWidth: 100,
            render: value => dateFormat(value) || '--',
        },
        {
            title: '上传时间',
            field: 'updateTime',
            align: 'center',
            minWidth: 100,
            render: value => dateFormat(value) || '--',
        },
        {
            title: '超过天数',
            field: 'exceedDay',
            filterType: 'search',
            filters: [{ data: '' }],
            minWidth: 100,
        },
    ];
    tableKey: number = 0;
    searchParams: PrivatePlacementDTO = {
        cpdmXhs: [], // 产品代码
        valuationDate: '',
        valuationDetail: '',
        exceedDay: '',
    };
    paging: PageVO = { pageSize: 25, currentPage: 1, total: 0 };
    checkRowKeys: any[] = [];
    fundStorage: DictVO[] = [];
    /** ** 保存列宽 ** **/
    resizeList: any = { entryName: 100, entryCode: 199 };

    async mounted() {
        this.resizeList = (await getTableLayout2('TR_PRIVATE_FUND_REPORT_RESIZE')) || null;
        for (const key in this.resizeList) {
            if (Object.prototype.hasOwnProperty.call(this.resizeList, key)) {
                const value = this.resizeList[key];
                // 列宽记忆
                for (let i = 0; i < this.columns.length; i++) {
                    const element = this.columns[i];
                    if (element.field === key) {
                        element.minWidth = value;
                        break;
                    }
                }
            }
        }

        window.addEventListener('message', this.refresh);

        this.getFundStorage();
        // this.fundStorage = await SGU_CACHE('FundInfoByUser', '/fundInfo/list/byUser/like', []);
        this.getTableData();
    }

    destroyed() {
        window.removeEventListener('message', this.refresh);
    }

    refresh(event) {
        if (event.data === 'Refresh') {
            console.log('vue-Refresh!');
            window.location.reload();
        }
    }

    get computedFundStorage() {
        let arr = changeOptions(this.searchParams.cpdmXhs, this.fundStorage, 'dictKey');
        return arr;
    }

    getTableData(): void {
        this.tableLoading = true;
        API.getPrivatePlacementList({ ...this.searchParams, paging: this.paging })
            .then((res: PrivatePlacementRepVO) => {
                this.tableData = res?.list || [];
                this.paging.total = res?.total;
            })
            .finally(() => {
                this.tableLoading = false;
            });
    }

    /**
     * 获取私募基金下拉框
     */
    getFundStorage(): void {
        API.getPrivatePlacementFund().then((res: any) => {
            this.fundStorage = res || [];
        });
    }

    handleBtnClick(operation): void {
        if (operation === 'search') {
            this.paging.currentPage = 1;
            this.getTableData();
        } else if (operation === 'reset') {
            this.paging.currentPage = 1;
            this.searchParams = {
                cpdmXhs: [], // 产品代码
                valuationDate: '',
                valuationDetail: '',
                exceedDay: '',
            };
            (this.$refs['risk-table'] as any).clearFilter();
            (this.$refs['risk-table'] as any).resetCheckRowKeys();
            this.getTableData();
        } else if (operation === 'export') {
            this.checkRowKeys = (this.$refs['risk-table'] as any).checkRowKeys;
            let data;
            if (this.checkRowKeys.length) {
                data = { exportKeys: this.checkRowKeys };
            } else {
                data = { ...this.searchParams };
            }
            API.exportPrivatePlacementList(data);
        }
    }

    /**
     * 列宽拖动 回调
     */
    resizeChange(col) {
        this.resizeList = Object.assign({}, this.resizeList, col);
        updateTableLayout({ showField: this.resizeList, tableName: 'TR_PRIVATE_FUND_REPORT_RESIZE' });
    }
}
</script>
<style lang="scss" scoped>
#private-placement {
    height: 100%;
    overflow: hidden;

    .title {
        padding-left: 10px;
        border: 1px solid #efefef;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        font-weight: bold;
        color: #575757;
    }

    .table-toolbar {
        .el-row {
            height: 40px;
            line-height: 40px;
            margin: 10px 0;
            .el-col {
                height: 100%;
            }
        }
    }

    /deep/ .el-form-item {
        margin: 0;

        .el-form-item__label {
            color: #575757;
            padding: 0;
            font-size: 12px;
        }

        .el-form-item__content {
            .el-select--mini {
                width: 100%;
            }

            .el-date-editor.el-input {
                width: 100%;
            }

            .el-input-group {
                vertical-align: inherit;
                display: inline-table;
            }
        }
    }
}

/***  collapse-tags样式 ***/
/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: fit-content;
    padding: 0px 5px 0 0;
    margin: 4px 0px 2px 2px;
    .el-select__tags-text {
        display: inline-block;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light:first-of-type {
    width: 63%;
}
/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light:last-of-type {
    width: 100%;
}
/***  collapse-tags样式 ***/
</style>
